<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,jquery.minicolors,jquery.range,font-awesome,layer,haoutil,turf,mars3d,mars3d-heatmap,toastr"
    ></script>
    <title>高凌</title>
    <link rel="stylesheet" type="text/css" href="res/css/font.css" />
    <link rel="stylesheet" type="text/css" href="res/css/style.css" />
    <link rel="stylesheet" type="text/css" href="res/css/screen6.css" />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/index2.css" />
    <link rel="stylesheet" type="text/css" href="res/css/screen6.css" />
    <link rel="stylesheet" href="res/css/divGraphic.css" />
  </head>

  <body>
    <div class="loading"></div>
    <div class="paraSelect-area">
      <form class="para-select" action="">
        <select name="streetOption" id="streetOption">
          <option value="">选择点位源数据类型</option>
          <option value="real">实时数据</option>
          <option value="minute">分钟数据</option>
          <option value="hour">小时数据</option>
          <option value="dn">昼夜间数据</option>
        </select>
      </form>
      <!-- <form class="para-select" action="">
      <select name="roadOption" id="roadOption">
        <option value="">选择噪声热力图数据</option>
      </select>
    </form> -->
      <button id="switch-heatmap" onclick="drawHeatList();">噪声公式</button>

      <button
        id="getPointLpData"
        onclick="getPointLpData('NSB0756000001116','2022-09-01 08:00:00');"
      >
        点位详情
      </button>
      <button id="getPointLpData" onclick="setDefaultViewPos();">
        保存视角
      </button>
      <button id="getPointLpData" onclick="flyToDefaultViewPos();">
        飞到视角
      </button>
    </div>
    <div class="logoMask"></div>
    <div class="csps-center">
      <!-- 3D map  -->
      <div class="map3D">
        <!-- 3D map -->
        <div
          id="mars3dContainer"
          class="mars3d-container"
          style="z-index: 999"
        ></div>
      </div>
      <!-- 地图控制区域 -->
      <div class="right-bar">
        <div class="right-buttonArea">
          <div class="rightBar-area">
            <img
              id="builidPointListData"
              src="./res/images/button/建筑工地a.png"
            />
          </div>
          <div class="rightBar-area">
            <img
              id="industryPointListData"
              src="./res/images/button/工业企业a.png"
            />
          </div>
          <div class="rightBar-area">
            <img
              id="livePointListData"
              src="./res/images/button/社会生活a.png"
            />
          </div>
          <div class="rightBar-area">
            <img
              id="trafficPointListData"
              src="./res/images/button/交通运输a.png"
            />
          </div>
          <div class="rightBar-area">
            <img
              id="functionPointListData"
              src="./res/images/button/声功能区a.png"
            />
          </div>
          <div class="rightBar-area">
            <img
              id="sensitiveInfoData"
              src="./res/images/button/敏感建筑.png"
            />
          </div>
          <div class="rightBar-area">
            <img
              id="memsPointListData"
              src="./res/images/button/辅助点位.png"
            />
          </div>
          <div class="rightBar-area">
            <img id="petitionListData" src="./res/images/button/投诉点位.png" />
          </div>
          <div class="rightBar-area">
            <img
              id="monitorSourceListData"
              src="./res/images/button/源清单.png"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="mainBox">
      <!-- 顶部盒子 -->
      <div class="maintop">
        <div class="maintopL">
          <div class="tit onetit"></div>
          <div class="bs"></div>
          <div class="tit towtit"></div>
          <div class="bs"></div>
          <div class="tq">
            <img src="./img/index/tq1.png" alt="" />
            <span>32℃</span>
          </div>
        </div>
        <div class="maintopC">城市噪声污染防控平台-DEMO</div>
        <div class="youBack">
          <img src="./img/youBack.svg" alt="" />
          <span>返 回</span>
        </div>
        <div class="maintopR">
          <img src="./img/index/rr1.png" alt="" />
          <img src="./img/index/rr2.png" alt="" />
          <img src="./img/index/rr3.png" alt="" />
          <div class="bs"></div>
          <div class="user">User</div>
        </div>
      </div>

      <div class="main">
        <!-- 左边盒子 -->
        <div class="mainLeft">
          <div class="mainLeftOne">
            <div class="titt">
              <span>声功能区超标事件</span>
            </div>
          </div>
          <!-- 第一个表格 -->
          <div class="tab1">
            <div class="tableTop">
              <div class="active">声功能区</div>
              <div>敏感建筑物集中区</div>
            </div>
            <div class="tableHade">
              <div class="row1">序号</div>
              <div class="row2">点位名称</div>
              <div class="row3">状态</div>
              <div class="row4">告警时间</div>
            </div>
            <div class="tableMain"></div>
          </div>
          <div class="mainLeftOne">
            <div class="titt">
              <span>声污染排放超标事件</span>
            </div>
          </div>
          <!-- 第二个表格 -->
          <div class="tab2">
            <div class="tableTop">
              <div class="active">全部</div>
              <div>建筑施工噪声</div>
              <div>社会生活噪声</div>
              <div>工业噪声</div>
              <div>交通运输噪声</div>
            </div>
            <div class="tableHade">
              <div class="row1">排名</div>
              <div class="row2">点位名称</div>
              <div class="row3">状态</div>
              <div class="row4">告警时间</div>
            </div>
            <div class="tableMain"></div>
          </div>
        </div>
        <!-- 右边盒子 -->
        <div class="mainRight">
          <div class="mainLeftOne">
            <div class="titt">
              <span>噪声投诉事件</span>
            </div>
          </div>
          <!-- 第三个表格 -->
          <div class="tab3">
            <div class="tableTop">
              <div class="active">全部</div>
              <div>建筑施工噪声</div>
              <div>社会生活噪声</div>
              <div>工业噪声</div>
              <div>交通运输噪声</div>
            </div>
            <div class="tab3Main"></div>
            <!-- 底部分页器 -->
            <div class="pageBot">
              <!-- <div class="btn left none">上一页</div>
            <div class="num">
              <div class="active">1</div>
              <div>2</div>
              <div>3</div>
              <div>4</div>
              <div>5</div>
              <div>6</div>
              <div>7</div>
              <div>8</div>
              <div>9</div>
              <div>10</div>
            </div>
            <div class="btn right">下一页</div> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./js/jQuery.js"></script>
  <script src="./js/echarts.min.js"></script>
  <script src="./js/echarts-gl.min.js"></script>
  <script src="res/js/tmpl.js"></script>
  <script src="res/js/area_data.js"></script>
  <script src="res/js/street_data.js"></script>
  <script src="res/js/js.js"></script>
  <!-- 大屏6相关js -->
  <script src="res/js/screen6.js"></script>
  <script src="res/js/calcVoice.js"></script>
  <!--第三方lib-->
  <script src="./js/common.js"></script>
  <!-- cesium mars 3d -->
  <script src="./res/js/pku3d.js"></script>
  <script src="./res/js/pku3dModel.js"></script>
  <script src="./res/js/pku3dZone.js"></script>
  <script src="./res/js/pku3dStreet.js"></script>
  <script>
    // let apiUrl = "http://112.91.146.165:13805";
    // ----------------------第一个的表格
    $.ajax({
      type: "POST",
      url: apiUrl + "/comleader/dataOutput/getFunctionOverEventInfo",
      dataType: "application/json",
      headers: {
        "Content-Type": "application/json",
        accessToken: "comleader@123",
      },
      data: JSON.stringify({
        //
      }),
      complete: (res) => {
        let tempRes = JSON.parse(res.responseText).data;
        let dom = document.querySelector(".tab1 .tableMain");
        let data1 = tempRes.functionList;
        let data2 = tempRes.sensitiveList;
        data1.forEach((v, i) => {
          let row = document.createElement("div");
          row.className = "row";
          let son1 = document.createElement("div");
          son1.className = "row1";
          son1.innerHTML = i + 1;
          row.appendChild(son1);
          let son2 = document.createElement("div");
          son2.className = "row2";
          son2.innerHTML = v.pointName;
          row.appendChild(son2);
          let son3 = document.createElement("div");
          let son3ClassName = "row3";
          if (v.status === "待处理") son3ClassName += " undone";
          else if (v.status === "处理中") son3ClassName += " done";
          son3.className = son3ClassName;
          son3.innerHTML = v.status;
          row.appendChild(son3);
          let son4 = document.createElement("div");
          son4.className = "row4";
          son4.innerHTML = v.eventTime;
          row.appendChild(son4);
          dom.appendChild(row);
        });
        $(".tab1 .tableTop div").click(function () {
          // 表格回到顶点
          dom.scrollTo(0, 0);
          $(this).addClass("active").siblings("div").removeClass("active");
          let tempArr = [];
          let temp = $(this)[0].innerText;
          if (temp == "声功能区") tempArr = data1;
          else if (temp == "敏感建筑物集中区") tempArr = data2;
          dom.innerHTML = "";
          tempArr.forEach((v, i) => {
            let row = document.createElement("div");
            row.className = "row";
            let son1 = document.createElement("div");
            son1.className = "row1";
            son1.innerHTML = i + 1;
            row.appendChild(son1);
            let son2 = document.createElement("div");
            son2.className = "row2";
            son2.innerHTML = v.pointName;
            row.appendChild(son2);
            let son3 = document.createElement("div");
            let son3ClassName = "row3";
            if (v.status === "待处理") son3ClassName += " undone";
            else if (v.status === "处理中") son3ClassName += " done";
            son3.className = son3ClassName;
            son3.innerHTML = v.status;
            row.appendChild(son3);
            let son4 = document.createElement("div");
            son4.className = "row4";
            son4.innerHTML = v.eventTime;
            row.appendChild(son4);
            dom.appendChild(row);
          });
        });
      },
    });

    // 第二个表格
    $.ajax({
      type: "POST",
      url: apiUrl + "/comleader/dataOutput/getNoiseOverEventInfo",
      dataType: "application/json",
      headers: {
        "Content-Type": "application/json",
        accessToken: "comleader@123",
      },
      data: JSON.stringify({
        //
      }),
      complete: (res) => {
        let tempRes = JSON.parse(res.responseText).data;
        let data3_1 = tempRes.allList;
        let data3_2 = tempRes.buildingList;
        let data3_3 = tempRes.liveList;
        let data3_4 = tempRes.industryList;
        let data3_5 = tempRes.trafficList;
        let dom = document.querySelector(".tab2 .tableMain");

        data3_1.forEach((v, i) => {
          let row = document.createElement("div");
          row.className = "row";
          let son1 = document.createElement("div");
          son1.className = "row1";
          son1.innerHTML = i + 1;
          row.appendChild(son1);
          let son2 = document.createElement("div");
          son2.className = "row2";
          son2.innerHTML = v.pointName;
          row.appendChild(son2);
          let son3 = document.createElement("div");
          let son3ClassName = "row3";
          if (v.status === "待处理") son3ClassName += " undone";
          else if (v.status === "处理中") son3ClassName += " done";
          son3.className = son3ClassName;
          son3.innerHTML = v.status;
          row.appendChild(son3);
          let son4 = document.createElement("div");
          son4.className = "row4";
          son4.innerHTML = v.eventTime;
          row.appendChild(son4);
          dom.appendChild(row);
        });
        $(".tab2 .tableTop div").click(function () {
          // 表格回到顶点
          dom.scrollTo(0, 0);
          $(this).addClass("active").siblings("div").removeClass("active");
          let tempArr = [];
          let temp = $(this)[0].innerText;
          if (temp == "全部") tempArr = data3_1;
          else if (temp == "建筑施工噪声") tempArr = data3_2;
          else if (temp == "社会生活噪声") tempArr = data3_3;
          else if (temp == "工业噪声") tempArr = data3_4;
          else tempArr = data3_5;
          dom.innerHTML = "";
          tempArr.forEach((v, i) => {
            let row = document.createElement("div");
            row.className = "row";
            let son1 = document.createElement("div");
            son1.className = "row1";
            son1.innerHTML = i + 1;
            row.appendChild(son1);
            let son2 = document.createElement("div");
            son2.className = "row2";
            son2.innerHTML = v.pointName;
            row.appendChild(son2);
            let son3ClassName = "row3";
            let son3 = document.createElement("div");
            if (v.status === "待处理") son3ClassName += " undone";
            else if (v.status === "处理中") son3ClassName += " done";
            son3.className = son3ClassName;
            son3.innerHTML = v.status;
            row.appendChild(son3);
            let son4 = document.createElement("div");
            son4.className = "row4";
            son4.innerHTML = v.eventTime;
            row.appendChild(son4);
            dom.appendChild(row);
          });
        });
      },
    });

    let pageData = {
      dataTotal: 0, // 返回列表的总条数
      MypageSize: 0, // 总页数
    };
    // 第三个表格
    // ----------头部，点击的时候需要重新生成分页器
    let taba3dom = document.querySelector(".tab3Main");
    let getData3_1 = function (obj) {
      $.ajax({
        type: "POST",
        url: apiUrl + "/comleader/dataOutput/getPetitionList",
        dataType: "application/json",
        headers: {
          "Content-Type": "application/json",
          accessToken: "comleader@123",
        },
        data: JSON.stringify({
          ...obj,
          pageSize: 10,
        }),
        complete: (res) => {
          let tempRes = JSON.parse(res.responseText);
          // 表格回到顶点
          taba3dom.scrollTo(0, 0);
          if (tempRes.data.length <= 0) {
            let nullTxt = document.createElement("div");
            nullTxt.className = "nullTxt";
            nullTxt.innerHTML = "暂无数据";
            taba3dom.appendChild(nullTxt);
          } else {
            tempRes.data.forEach((v) => {
              let tab3Row = document.createElement("div");
              tab3Row.className = "tab3Row";

              let son1 = document.createElement("div");
              son1.className = "tit";
              son1.innerHTML = v.petitionTitle;
              tab3Row.appendChild(son1);

              let son2 = document.createElement("div");
              son2.className = "txt";
              son2.innerHTML = "投诉时间：" + v.petitionTime;
              tab3Row.appendChild(son2);

              let son3 = document.createElement("div");
              son3.className = "txt";
              son3.innerHTML = "关联地点：" + v.petitionObjAddress;
              tab3Row.appendChild(son3);

              let son4 = document.createElement("div");
              let son4ClassName = "status1";
              if (v.petitionStatus === "处理中") son4ClassName = "status2";
              else if (v.petitionStatus === "已办结") son4ClassName = "status3";
              son4.className = son4ClassName;
              son4.innerHTML = v.petitionStatus;
              tab3Row.appendChild(son4);

              taba3dom.appendChild(tab3Row);
            });
            //生成分页器
            if (tempRes.dataTotal > 10) {
              let pageDome = document.querySelector(".pageBot");
              let page1 = document.createElement("div");
              page1.className = "btn left none";
              page1.innerHTML = "上一页";
              pageDome.appendChild(page1);
              let numDom = document.createElement("div");
              numDom.className = "num";
              pageData.dataTotal = tempRes.dataTotal;
              pageData.MypageSize = Math.ceil(tempRes.dataTotal / 10);
              for (let i = 0; i < pageData.MypageSize; i++) {
                let pageNum = document.createElement("div");
                if (i === 0) pageNum.className = "active";
                pageNum.innerHTML = i + 1;
                numDom.appendChild(pageNum);
              }
              pageDome.appendChild(numDom);
              let page2 = document.createElement("div");
              page2.className = "btn right";
              page2.innerHTML = "下一页";
              pageDome.appendChild(page2);
            }
            // 点击页码
            $(".pageBot .num div").click(function () {
              let type = "";
              let page = 1;

              $(this).addClass("active").siblings("div").removeClass("active");
              let temp = $(this)[0].innerText;

              if (temp == 1) {
                $(".pageBot .left").addClass("none");
                $(".pageBot .right").removeClass("none");
              } else if (temp == pageData.MypageSize) {
                $(".pageBot .right").addClass("none");
                $(".pageBot .left").removeClass("none");
              } else {
                $(".pageBot .left").removeClass("none");
                $(".pageBot .right").removeClass("none");
              }
              let topTemp = $(".tab3 .tableTop .active").text();
              type = txtChange[topTemp];
              page = Number(temp);
              taba3dom.innerHTML = "";
              getData3_2({
                type,
                page,
              });
            });

            // 点击上一页
            $(".pageBot .left").click(function () {
              $(".pageBot .right").removeClass("none");
              let active = $(".pageBot .num .active");
              let activeTxt = active.text();
              let topTemp = $(".tab3 .tableTop .active").text();
              let type = txtChange[topTemp];
              let page = Number(activeTxt) - 1;
              if (page == 1) $(".pageBot .left").addClass("none");
              active.removeClass("active");
              let numDoms = document.querySelectorAll(".pageBot .num div");
              numDoms.forEach((v) => {
                if (v.innerText == Number(activeTxt) - 1)
                  v.classList.add("active");
              });
              taba3dom.innerHTML = "";
              getData3_2({
                type,
                page,
              });
            });

            // 点击下一页
            $(".pageBot .right").click(function () {
              $(".pageBot .left").removeClass("none");
              let active = $(".pageBot .num .active");
              let activeTxt = active.text();
              let topTemp = $(".tab3 .tableTop .active").text();
              let type = txtChange[topTemp];
              let page = Number(activeTxt) + 1;
              if (page == pageData.MypageSize)
                $(".pageBot .right").addClass("none");
              active.removeClass("active");
              let numDoms = document.querySelectorAll(".pageBot .num div");
              numDoms.forEach((v) => {
                if (v.innerText == Number(activeTxt) + 1)
                  v.classList.add("active");
              });
              taba3dom.innerHTML = "";
              getData3_2({
                type,
                page,
              });
            });
          }
        },
      });
    };
    getData3_1({
      type: "",
      page: 1,
    });
    let txtChange = {
      全部: "",
      建筑施工噪声: "BUILIDING",
      社会生活噪声: "LIVE",
      工业噪声: "INDUSTRIAL",
      交通运输噪声: "TRAFFIC",
    };
    $(".tab3 .tableTop div").click(function () {
      let pageDome = document.querySelector(".pageBot");
      pageDome.innerHTML = "";
      let type = "";
      let page = 1;
      $(this).addClass("active").siblings("div").removeClass("active");
      let temp = $(this)[0].innerText;
      type = txtChange[temp];
      taba3dom.innerHTML = "";
      getData3_1({
        type,
        page,
      });
    });

    // ----------底部页码，不需要在次生成分页器
    let getData3_2 = function (obj) {
      $.ajax({
        type: "POST",
        url: apiUrl + "/comleader/dataOutput/getPetitionList",
        dataType: "application/json",
        headers: {
          "Content-Type": "application/json",
          accessToken: "comleader@123",
        },
        data: JSON.stringify({
          ...obj,
          pageSize: 10,
        }),
        complete: (res) => {
          let tempRes = JSON.parse(res.responseText);
          // 表格回到顶点
          taba3dom.scrollTo(0, 0);
          if (tempRes.data.length <= 0) {
            let nullTxt = document.createElement("div");
            nullTxt.className = "nullTxt";
            nullTxt.innerHTML = "暂无数据";
            taba3dom.appendChild(nullTxt);
          } else {
            tempRes.data.forEach((v) => {
              let tab3Row = document.createElement("div");
              tab3Row.className = "tab3Row";

              let son1 = document.createElement("div");
              son1.className = "tit";
              son1.innerHTML = v.petitionTitle;
              tab3Row.appendChild(son1);

              let son2 = document.createElement("div");
              son2.className = "txt";
              son2.innerHTML = "投诉时间：" + v.petitionTime;
              tab3Row.appendChild(son2);

              let son3 = document.createElement("div");
              son3.className = "txt";
              son3.innerHTML = "关联地点：" + v.petitionObjAddress;
              tab3Row.appendChild(son3);

              let son4 = document.createElement("div");
              let son4ClassName = "status1";
              if (v.petitionStatus === "处理中") son4ClassName = "status2";
              else if (v.petitionStatus === "已办结") son4ClassName = "status3";
              son4.className = son4ClassName;
              son4.innerHTML = v.petitionStatus;
              tab3Row.appendChild(son4);

              taba3dom.appendChild(tab3Row);
            });
          }
        },
      });
    };
  </script>
  <script src="./js/headTime.js"></script>
</html>
